<template>
  <div class="filters">
    <el-form ref="form" :model="form">
      <el-row type="flex" justify="space-around">
        <el-col :span="4">
          <el-form-item>
            <el-autocomplete
              class="inline-input"
              v-model="form.city"
              :fetch-suggestions="querySearch"
              placeholder="切换城市"
              :trigger-on-focus="false"
              :highlight-first-item="true"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="8"
          ><el-form-item>
            <el-date-picker
              v-model="form.date"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker
          ></el-form-item>
        </el-col>
        <el-col :span="4"
          ><el-form-item>
            <el-popover
              placement="bottom"
              width="300"
              trigger="click"
              v-model="show"
            >
              <el-row type="flex" justify="space-between" align="middle">
                <el-col :span="4">每间</el-col>
                <el-col :span="6">
                  <el-select size="mini" v-model="adultsNumber">
                    <el-option
                      v-for="(item, index) in adults"
                      :key="index"
                      :label="item + '成人'"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select size="mini" v-model="childsNumber">
                    <el-option
                      v-for="(item, index) in childs"
                      :key="index"
                      :label="item + '儿童'"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
              <div class="line"></div>
              <el-row type="flex" justify="end">
                <el-button type="primary" size="mini" @click="verify"
                  >确认</el-button
                >
              </el-row>
              <el-input
                :readonly="true"
                slot="reference"
                placeholder="人数未定"
                suffix-icon="el-input__icon iconfont iconuser"
                v-model="form.personNumer"
              >
              </el-input>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="LookPrice">查看价格</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      adults: [1, 2, 3, 4, 5, 6, 7],
      childs: [0, 1, 2, 3, 4],
      adultsNumber: 1,
      childsNumber: 0,
      loadCityList: [],
      form: { city: "", personNumer: "", date: "", cityId: "" },
    };
  },

  methods: {
    LookPrice() {
      this.$emit("setCity", this.form);
    },
    verify() {
      this.form.personNumer = `${this.adultsNumber} 成人 ${
        this.childsNumber ? this.childsNumber + "儿童" : ""
      } `;
      this.show = false;
    },
    // 显示搜索建议
    querySearch(queryString, showList) {
      this.loadCity(queryString, showList);
    },
    handleSelect(item) {
      console.log(item);
      this.form.cityId = item.id;
      this.$emit("city", item);
    },
    loadCity(queryString, showList) {
      if (!queryString) {
        showList([
          {
            value: "请输入关键字",
          },
        ]);
        return;
      }
      // 远程服务器获取城市列表
      this.$axios({
        url: "/airs/city",
        params: {
          name: queryString,
        },
      }).then((res) => {
        console.log(res);
        const data = res.data.data
          .filter((city) => {
            return city.sort;
          })
          .map((city) => {
            // 之前这里是直接获取数据, value 是以 name 作为基础
            // 用来显示建议列表, 只需要在赋值 value 的时候,将 市字去掉即可
            return {
              ...city,
              value: city.name,
            };
          });
        // console.log(data);
        showList(data);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.line {
  height: 1px;
  background-color: #ddd;
  margin: 20px 0;
}
</style>